<script>
import { onMounted, onBeforeUnmount, reactive, toRefs, ref } from "vue";

import * as echarts from "echarts";
export default {
  props: {
    labelListh: { type: Array, default: [] }, //标签列表
    dataListFlowh: { type: Array, default: [] }, //数据列表
    dataListGenderh: { type: Array, default: [] }, 
    dataListBagh: { type: Array, default: [] }, 
 },
  setup(props) {
    const state = reactive({});

    const echartContainer = ref();
    let myChart = null;

    const resizeHandler = () => {
      myChart.resize();
    };

    //防抖
    const debounce = (func, wait) => {
      let timeout;
      return function () {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    };

    const cancalDebounce = debounce(resizeHandler, 500);

    const initChart = () => {
      myChart = echarts.init(echartContainer.value);

      window.addEventListener("resize", cancalDebounce);

      let option = {
        title:{
          text: "按小时统计北门客流数据曲线",
          top:"1%",
          textStyle:{
              fontSize:12,
 
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["出场人数", "出场人次", "入场人数", "入场人次"],
          top:"10%" 
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: props.labelListh,
          axisLabel:{
              interval:0,         
          }
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "出场人数",
            type: "line",
            data: [
              props.dataListFlowh[0],
              props.dataListFlowh[1],
              props.dataListFlowh[2],
              props.dataListFlowh[3],
              props.dataListFlowh[4],
            ],
          },
          {
            name: "出场人次",
            type: "line",
            data: [
              props.dataListFlowh[5],
              props.dataListFlowh[6],
              props.dataListFlowh[7],
              props.dataListFlowh[8],
              props.dataListFlowh[9],
            ],
          },
          {
            name: "入场人数",
            type: "line",
            data: [
              props.dataListFlowh[10],
              props.dataListFlowh[11],
              props.dataListFlowh[12],
              props.dataListFlowh[13],
              props.dataListFlowh[14],
            ],
          },
          {
            name: "入场人次",
            type: "line",
            data: [
              props.dataListFlowh[15],
              props.dataListFlowh[16],
              props.dataListFlowh[17],
              props.dataListFlowh[18],
              props.dataListFlowh[19],
            ],
          },
        ],
      };

      myChart.setOption(option);
    };

    onMounted(() => {
      initChart();
    });

    onBeforeUnmount(() => {
      window.removeEventListener("resize", cancalDebounce);
      myChart.dispose();
    });

    return { ...toRefs(state), echartContainer };
  },
};
</script>

<template>
  <el-card shadow="never" style="width: 100%; height: 100%">
    <template></template>
    <div ref="echartContainer" style="width: 100%; height: 100%"></div>
  </el-card>
</template>
<style scoped>
</style>